<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    
</body>
<script>

    // 作用域的嵌套
    
    // 创建
    // function box(){
    //     let a = 10;
    //     function fn(){
    //         a++;
    //         console.log(a);
    //     }
    //     return fn;
    // }

    // 执行
    // const f = box();
    // f();
    // f();
    // f();
    // f();
    // f();
    // f();


    // 封装通用的轮播图
    // ;const obj = (function(){
    //     // 当前显示的图片索引
    //     let index = 0;

    //     // 轮播图的功能，在轮播图的功能内，要使用或改变索引

    //     // 如果外部，需要获取到这个索引，根据轮播图到第几个索引了，决定执行其他功能

    //     document.onclick = function(){
    //         index++;
    //     }

    //     return function(){
    //         return index;
    //     }
    // })();

    // document.oncontextmenu = function(){
    //     const i = obj();
    //     console.log(i);
    // }




    // ===========



    // // 沙箱模式
    // function box(){
    //     let a = 10;
    //     let msg = "hello";

    //     return {
    //         getA(){
    //             return a;
    //         },
    //         setA(val){
    //             a = val;
    //         },
    //         getMsg(){
    //             return msg;
    //         },
    //         setMsg(val){
    //             msg = val;
    //         }
    //     }
    // }

    // // 访问a和msg
    // // 修改a和msg

    // const obj = box()
    // console.log(obj.getA())
    
    // obj.setA("hello");
    
    // console.log(obj.getA())


    // 升级沙箱
    function box(){

        let aa = 10;
        let msg = "hello";

        return {
            get a(){
                return aa;
            },
            set a(val){
                aa = val;
            },
            get msg(){
                return msg;
            },
            set msg(val){
                msg = val;
            }
        }
    }

    const obj = box();

    console.log(obj.a);
    obj.a = 20;
    console.log(obj.a);



</script>
</html>